<template>
  <!-- CouponSelectPermissions 选择谁可以看 -->
  <PageContainer>
    <view class="container">
      <Header title="选择谁可以看" />
      <template v-for="v in list" :key="v.dictValue">
        <view class="list-item" @click="itemClick(v)">
          <view class="checkbox">
            <image
              v-if="v.dictValue == selected"
              class="icon"
              src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/selected-icon.png"
            />
            <image v-else class="icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/select-icon.png" />
          </view>
          <view class="item-text">
            <text class="label">{{ v.dictLabel }}</text>
            <text>{{ v.description }}</text>
          </view>
        </view>
      </template>
      <view
        v-if="selected == MemberCouponPermissionsEnum.SICHTTEIL"
        class="list-item select-position"
        @click="selectPosition"
      >
        <view class="checkbox"></view>
        <view class="item-text">
          <text class="label">选择职务</text>
          <view>
            <template v-for="v in positionSelected" :key="v.id">
              <text>{{ v.name }}({{ v.count }})，</text>
            </template>
          </view>
        </view>
      </view>

      <TButtonGroup>
        <TButton class="gutter-btn" text="确认" customClass="cardBtn" @click="onSubmit" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  CouponSelectPermissions  选择谁可以看 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import { type GetDownStatisticsListResult } from '@/api/indexTypes';
  import Header from '@/components/Header/index.vue';
  import { MemberCouponPermissionsEnum } from '@/enums/memberCouponEnum';
  import { navigateBack, navigateTo, onLoad } from '@/router';
  import { type CouponSelectPermissions } from '@/router/types/modules';
  import dictionary, { type IDictItem } from '@/utils/dictionary';
  import { ref } from 'vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const selected = ref(MemberCouponPermissionsEnum.PUBLIC);
  const positionSelected = ref<GetDownStatisticsListResult[]>([]);
  let success: CouponSelectPermissions['success'];

  const list = ref(dictionary.getLocal('ticketPermissions'));

  function itemClick(item: IDictItem) {
    const type = Number(item.dictValue) as MemberCouponPermissionsEnum;
    selected.value = type;
  }

  function selectPosition() {
    navigateTo({
      name: 'couponSelectPosition',
      options: {
        selected: positionSelected.value,
        success: (selected) => {
          positionSelected.value = selected;
        },
      },
    });
  }

  function onSubmit() {
    success?.({
      role: selected.value,
      positionList:
        selected.value === MemberCouponPermissionsEnum.SICHTTEIL ? positionSelected.value : [],
    });
    navigateBack();
  }

  onLoad<'CouponSelectPermissions'>((op) => {
    selected.value = op.role;
    positionSelected.value = op.positionList;
    success = op.success;
  });
</script>

<style lang="scss" scoped>
  .container {
    height: 100vh;
    background-color: #fff;
    .list-item {
      display: flex;
      align-items: center;
      .checkbox {
        width: 80rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 32rpx;
          height: 32rpx;
        }
      }
      .item-text {
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        border-bottom: 1px solid #dddddd;
        font-size: 24rpx;
        color: #aaabab;
        padding: 30rpx 0;
        padding-right: 30rpx;
        .label {
          color: #333;
          font-size: 28rpx;
          margin-bottom: 10rpx;
        }
      }
    }

    .select-position {
      .item-text {
        border-bottom: none;
        .label {
          color: #2878ff;
        }
      }
    }
  }
</style>
